<template>
  <div class="content-container">
    <!-- 搜索栏 -->
    <div ref="adminContentSearch" class="content-search-wrap">
      <el-form 
      	class="content-search"
      	inline
      	size="mini"
      >
        <el-form-item label="日志类型">
          <el-input v-model="query.logType" placeholder="名称"></el-input>
        </el-form-item>

        <el-form-item>
    		<el-button size="mini" type="primary">搜索</el-button>
    		<el-button size="mini" type="danger">清空</el-button>
  		</el-form-item>
      </el-form>
    </div>
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       
             <el-button size="mini" type="danger" icon="el-icon-edit" @click="handleDelAll">清空全部</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
			    <el-tooltip effect="dark" content="刷新" placement="top">
            <el-button size="mini" type="primary" icon="el-icon-refresh" circle @click="refresh"></el-button>
          </el-tooltip>
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn" :style="{height:ResultHeight+'px'}">
    	<el-table
        border
        v-if="data"
        size="mini"
        :height.sync="tableHeight"
        :data="data"
        style="width: 100%"
      >
    		<el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>

    		<el-table-column
    			  fixed
		      	type="index"
		      	:index="tableIndex">
		    </el-table-column>

    		<el-table-column
		      fixed
		      prop="logType"
		      label="日志类型"
		      width="100">
		    </el-table-column>

		    <el-table-column
		      prop="logName"
		      label="日志名称"
		      width="100">
		    </el-table-column>

        <el-table-column
          prop="userName"
          label="用户名称"
          width="100">
        </el-table-column>

        <el-table-column
          prop="className"
          label="类名"
          width="200">
        </el-table-column>

        <el-table-column
          prop="method"
          label="方法名"
          width="100">
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
        </el-table-column>


		    <el-table-column
		    	fixed="right"
		      label="操作"
          width="80"
		    >

		      <template slot-scope="scope">
		      	<el-button
		      		size="mini"
		      		type="primary"
		      		@click="handleCheck(scope.$index, scope.row)"
		      	>查看</el-button>

		      </template>

		    </el-table-column>

    	</el-table>

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>  
    </div>

    <!-- 修改dialog -->
    <log-dialog
    	:visible="editDialogVisible"
    	:form.sync='editForm'
      :type="editType"
    	@cancel="editDialogCancel"
    ></log-dialog>

    
  </div>

</template>

<script>
import { mapGetters } from 'vuex'

import {
  getList,
  delAll
} from "@/api/admin/log";

import LogDialog from '@/components/Dialog/logDialog'
import adminMixins from "@/mixins/admin"
export default {
  name: 'log',
  mixins:[adminMixins],
  components:{
  	LogDialog
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  data(){
  	return{
      //1新增，2修改 , 3查看
      editType:0,
      loading:true,
  		query:{
        logType:''
      },
  		//修改模态框的显示隐藏
  		editDialogVisible:false,
  		data:null,
  		page: {
    	  pageSize: 10,
    	  currentPage: 1,
    	  total: 0
  	  },
  	  pageSizes:[10,20,30,40,50,100],
  	  editForm:{}
  	}
  },
  mounted(){
    //设置dom尺寸
    this.setSize();
  	this.loadData(this.page)
  },
  methods:{
  	//请求table数据
  	loadData(page, params = {}){
  		  this.loading = true;
      	getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {

      		console.log(res)
        	this.loading = false;
          this.page.total = res.data.count;
        	this.data = res.data.data;


      	});
      	
  	},
  	//表格序号
  	tableIndex(index){
  		return index+1
  	},
  	//点击操作的编辑
  	handleCheck(index,row){
      this.editType = 3;
      this.editForm = row;
      //模态框显示
      this.editDialogVisible = true;
  	},
  	//点击操作的删除
  	handleDelAll(){

  		this.$confirm('是否清空全部日志', {
          	confirmButtonText: '确定',
          	cancelButtonText: '取消',
          	type: 'warning'
        }).then(()=>{
        	return delAll()
        }).then((res) => {

        	  this.loadData(this.page)
          	this.$message({
            	type: 'success',
            	message: '删除成功!'
          	});
        }).catch(() => {
          	this.$message({
            	type: 'info',
            	message: '已取消删除'
          	});          
        });
  	},
    //刷新
    refresh(){
      this.loadData(this.page)
    },
  	editDialogCancel(){
  		this.editDialogVisible = false;
      this.editType = 0;
  		this.editForm = null;
  	}
  }
}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
</style>
